<template>
  <div class="language" ref="homePage">
    <div class="bj">
      <van-nav-bar title="语言导览" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div class="input">
      <form style="width: 90%;" action="/">
        <van-search v-model="input" placeholder="搜索想要的景区名" /><!-- @search="onSearch" -->
      </form>
    </div>
    <div class="language_box">
        <div class="language_div">
          <div class="language_img">
            <img src="../../assets/400.jpg"/>
          </div>
          <span>欢乐谷</span>
        </div>
        <div class="language_div">
          <div class="language_img">
            <img src="../../assets/400.jpg"/>
          </div>
          <span>欢乐谷</span>
        </div>
        <div class="language_div">
          <div class="language_img">
            <img src="../../assets/400.jpg"/>
          </div>
          <span>欢乐谷</span>
        </div>
        <div class="language_div">
          <div class="language_img">
            <img src="../../assets/400.jpg"/>
          </div>
          <span>欢乐谷</span>
        </div>
    </div>

  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        input: '',

      }
    },
    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';

    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
    }
  }
</script>

<style lang="scss">
  .language {
    background: white;
    .bj{
      .van-icon {
        color: white !important;

      }
    }
    .input{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      background: #46d0ca;
      .van-search{
        width: 100% !important;
        height: 100%;
        // border: 1px solid #46d0ca;
        padding: 0px;
        border-radius: 30px;
        // margin: 5px auto;
        border: none;
        .van-search__content{
          border-radius: 30px;
        }
      }
    }
    .language_box{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .language_div{
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        width: 45%;
        height: 170px;
        margin-top: 20px;
        .language_img{
          width: 100%;
          height:140px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        span{
          font-size: 14px;
          margin-top: 5px;
        }
      }
    }
  }
</style>
